﻿<style>
  #left-menu.el-menu--collapse {
    width: 100%;
  }
  #left-menu.el-menu--collapse
  > .el-submenu
  > .el-submenu__title
  .el-submenu__icon-arrow,
  .left-menu-title.el-menu--collapse > .el-menu-item .el-submenu__icon-arrow {
    display: none;
  }
  /*#left-menu.el-menu--collapse>.el-menu-item .el-submenu__icon-arrow, .el-menu--collapse>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {*/
  /*  display: none;*/
  /*}*/
  .left-menu-title .el-submenu__icon-arrow {
    display: inline !important;
  }
  .left-menu-title {
    width: 100px !important;
  }
  #left-menu.el-menu--collapse > .el-menu-item [class^="icon-"],
  .el-menu--collapse > .el-submenu > .el-submenu__title [class^="icon-"] {
    margin: 0;
    vertical-align: middle;
    width: 24px;
    text-align: center;
  }

  #left-menu .el-submenu [class^="icon-"] {
    vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 16px;
  }
  #left-menu .el-menu--collapse > .el-menu-item span,
  .el-menu--collapse > .el-submenu > .el-submenu__title span {
    width: auto;
    height: auto;
    visibility: visible;
  }

</style>
<template>
  <div class="menu">
    <el-menu
            style="height:100%;"
            id="left-menu"
            :default-active="defaultActive"
            :router="true"
            unique-opened
            menu-trigger="click"
            collapse
            @select="handleSelect"
    >
      <template v-if="data&&data.length>0" v-for="item in data">
        <el-submenu v-if="item.children&&item.children.length>0" :index="item.path?item.path:item.id">
          <template slot="title">
            <i v-if="item.icon&&item.icon.length>0" :class="item.icon"  style="width:18px;font-size:18px;"></i>
            <!--                <span slot="title">{{item.name}}</span>-->
            <span v-if="!collapse" class="left-menu-title" slot="title">
                  {{item.name}}
                  <i class="el-submenu__icon-arrow el-icon-arrow-right"></i>
                </span>
          </template>
          <template v-for="item2 in item.children">
            <el-submenu v-if="item2.children&&item2.children.length>0" :index="item2.path?item2.path:item2.id">
              <template slot="title">
                <i v-if="item2.icon&&item2.icon.length>0" :class="item2.icon"></i>
                {{item2.name}}
              </template>
              <template v-for="item3 in item2.children">
                <el-submenu v-if="item3.children&&item3.children.length>0" :index="item3.path?item3.path:item3.id">
                  <template slot="title">
                    <i v-if="item3.icon&&item3.icon.length>0" :class="item3.icon"></i>
                    {{item3.name}}
                  </template>
                  <el-menu-item v-for="item4 in item3.children" :index="item4.path?item4.path:item4.id">
                    <span>{{item4.name}}</span>
                  </el-menu-item>
                </el-submenu>
                <el-menu-item v-else :index="item3.path?item3.path:item3.id">
                  <i v-if="item3.icon&&item3.icon.length>0" :class="item3.icon"></i>
                  <span>{{item3.name}}</span>
                </el-menu-item>
              </template>
            </el-submenu>
            <el-menu-item v-else :index="item2.path?item2.path:item2.id">
              <i v-if="item2.icon&&item2.icon.length>0" :class="item2.icon"></i>
              <span>{{item2.name}}</span>
            </el-menu-item>
          </template>
        </el-submenu>
        <!--            <el-menu-item v-else :index="item.path"><span>{{item.name}}</span></el-menu-item>-->
        <el-menu-item v-else :index="item.path?item.path:item.id">
          <i v-if="item.icon&&item.icon.length>0" :class="item.icon" style="width:18px;font-size:18px;"></i>
          <div
                  v-if="!collapse"
                  class="left-menu-title"
                  style="display:inline;padding-left:5px;"
          >{{item.name}}</div>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<script>
function noop() {}
export default {
  name: "PopMenu",
  // props:{
  //   title: {},action:{},headers:{},data:{},name:{},showFileList:{type:Array,default:false}
  //   ,accept:{},'on-preview':{},'on-remove':{},fileList:{type:Array,default:()=>{return []}}
  // },
  props: {
    defaultActive:{},
    data:{},
    collapse:{type:Boolean,default:false},
  },
    data(){
      return {
        collapseWidth:60,
      }
    },
  methods: {
    handleSelect(path) {
      if(path&&path.indexOf("http")==0) {
        window.open(path);
        return;
      }
    }
  }
};
</script>
